<template>
  <div class="box">
    <h1>组件传值 - 组件</h1>
    <p>自己的数据：{{ title }}</p>
    <Child1 a="hello" b="123" e="true" :c="true" :d="123" :f="title" />
    <p>来自于子组件的数据：{{ str }}</p>
    <Child2 @abc="getAbc" />
  </div>
</template>

<script>
import Child1 from "@/components/Child1.vue";
import Child2 from "@/components/Child2.vue";
export default {
  components:{
    Child1, Child2
  },
  data() {
    return {
      title: "这是父组件的数据",
      str: ''
    }
  },
  methods:{
    getAbc(val, a, v, c, x, z){
      // console.log(val);
      console.log(val, a, v, c, x, z);
      this.str = val;
    }
  }
}
</script>

<style>
.box{
  border:solid 1px black;
  margin: 5px;
  padding: 5px;
}
.box div{
  border:solid 1px black;
  margin: 5px;
  padding: 5px;
}
</style>